<template>
	<new-table v-bind="state" @handleSizeChange="onHandleSizeChange" @handleCurrentChange="onHandleCurrentChange"
		@handleSort="onHandleSort">
		<template #search>
			<new-form :formOptions="formOptions" :searchForm="searchForm" @search="onSearch" />
		</template>

		<template #operation="scope">
			<el-button type="primary" link
				@click="openDetail(scope.row, ModalType.SOURCE as keyof typeof ModalType)">来源详情</el-button>
			<el-button type="primary" link
				@click="openDetail(scope.row, ModalType.COURSE as keyof typeof ModalType)">课程分类详情</el-button>
		</template>
	</new-table>
	<SourceModal ref="sourceModalRef" />
</template>

<script setup lang="ts" name="FormTableDemoExample">
import { onMounted, reactive, toRefs, ref, watchEffect } from "vue";
import NewTable from 'src/components/NewTable/index.vue'
import NewForm from 'src/components/NewForm/index.vue'
import SourceModal from '../components/SourceModal.vue'
import { ModalType, PageType } from '../const'
import { getClueRank } from "../api";
import utils from "src/utils";
import { useUserList, useValidateDepartmentList } from "src/hooks";

const [userList] = useUserList();
const [validateDepartmentList] = useValidateDepartmentList();
const today = utils.getTodayDate()
const sourceModalRef = ref<InstanceType<typeof SourceModal> | null>(null);
const state = reactive({
	/**
 * 	"clueNum": "线索量",
	"courseName": "类目名称",
	"departmentName": "部门名称",
	"departmentid": "部门id",
	"effective": "有效订单量",
	"sourceName": "来源名称",
	"uneffective": "冲红量",
	"userName": "推广员名称",
	"userid": "推广员id"
 */
	tableHeader: <TableHeader[]>[
		{ label: "推广员", prop: "userName" },
		{ label: "录单数量", prop: "clueNum", sortable: true },
		{ label: "冲单数量", prop: "uneffective", sortable: true },
		{ label: "有效名单数量", prop: "effective", sortable: true },
		{ label: "部门", prop: "departmentName" },
		{
			label: "操作",
			fixed: "right",
			slotKey: "operation",
			width: 200,
		},
	],
	//表项数据
	tableData:<Api_DataStatistics.ClueItemProps[]> [],
	formOptions: <FormOptions[]>[],
	//这里允许动态属性所以可为空
	searchForm: <SearchFormType>{},
	isShowSearchRegion: true,
	pageNum: 1,
	pageSize: 10,
	total: 0,
	tableHeight: "calc(100vh - 302px)",
	isIndex: false,
});
const { formOptions, searchForm, pageNum, pageSize } = toRefs(state);
const openDetail = (row: any, type: keyof typeof ModalType) => {
	const currentRow = utils.cloneDeep(row)
	if (searchForm.value.searchTime) {
		currentRow.btime = searchForm.value.searchTime[0] + ' 00:00:00';
		currentRow.etime = searchForm.value.searchTime[1] + ' 00:00:00';
	}
	sourceModalRef.value?.openDialog(currentRow, type, PageType.CLUE as keyof typeof PageType);
}

//页容量改变
const onHandleSizeChange = (val: number) => {
	// console.log('页容量 ==>：', val);
	pageSize.value = val;
	getTableList();
};
//当前分页改变
const onHandleCurrentChange = (val: number) => {
	// console.log('当前页 🚀 ==>：', val);
	pageNum.value = val;
	getTableList();
};

// 获取表项数据
const getTableList = () => {
	// 处理searchForm.value searchTime
	let params = { ...searchForm.value };
	if (params.searchTime) {
		params.btime = params.searchTime[0] + ' 00:00:00';
		params.etime = params.searchTime[1] + ' 00:00:00';
	}
	delete params.searchTime;
	console.log(params, pageNum, pageSize);
	const { btime, etime, departmentid, userid, order, columnName } = params
	getClueRank({
		page: pageNum.value,
		size: pageSize.value,
		order: order || 'desc',
		columnName: columnName || 'addtime',
		btime,
		etime,
		departmentid: departmentid || 0,
		userid: userid || 0
	}).then((res) => {
		if (`${res.code}` === '0') {
			const { total, clueRankVOList } = res.data;
			state.total = total;
			state.tableData = [...clueRankVOList]
		} else {
			state.total = 0;
			state.tableData = []
		}
	});
};

const onHandleSort = utils.commonSortChage(searchForm, getTableList)

const onSearch = (isReset?: string) => {
	pageNum.value = isReset ? 1 : pageNum.value;
	getTableList();
};
watchEffect(() => {
	state.formOptions = [
		{
			type: "select",
			props: {
				label: "部门",
				placeholder: "请选择部门",
				clearable: true,
			},
			vm: "departmentid",
			selectOptions: [...validateDepartmentList]
		},
		{
			type: "select",
			props: {
				label: "推广员",
				placeholder: "请选择推广员",
				clearable: true,
			},
			vm: "userid",
			selectOptions: [...userList]
		},
		// 时间范围选择器
		{
			type: "date-picker",
			props: {
				label: "时间",
				type: "daterange", // daterange范围 datetime日期
				clearable: true,
				"range-separator": "-",
				"start-placeholder": "开始日期",
				"end-placeholder": "结束日期",
				"value-format": "YYYY-MM-DD",
				format: "YYYY-MM-DD",
			},
			vm: "searchTime",
		}
	]
})

onMounted(() => {
	state.searchForm.searchTime = [today, today]
	getTableList()
});
</script>
